<template>
    <div @click="handleClick" :class="{
        'pai-content':true,
        'clicked':props.isSelected,
       /*'played': isPlayed,  // 新增已出牌状态 
        'disabled': isDisabled  // 新增禁用状态*/
        }">
        <div  :class="{
            'red-pai':pai.suit.color == 'red',
             'black-pai':pai.suit.color == 'black'}">
            {{ props.pai.suit.log }}
            {{ props.pai.rank }}
        </div>
    </div>
</template>

<script setup>
  import { ref } from 'vue'
// 移除所有内部状态管理
const props = defineProps({
  pai: Object,
  isSelected: Boolean // 由父组件控制
})

const emit = defineEmits(['play-card'])

const handleClick = () => { 
    // if (isDisabled.value || isPlayed.value) return
    
    // 触发出牌事件
    emit('play-card', {
        card: props.pai,
    })
    

}

</script>

<style scoped lang="scss">

.pai-content{
    transition: transform 0.3s ease; /* 添加平滑过渡 */
    width: 8%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #000; /* 边框样式 */
    box-sizing: border-box;
      /* 确保 transform 生效 */
    will-change: transform; /* 可选性能优化 */
      // 修复层级问题
  z-index: 1;
    // 添加定位属性
    position: relative;
    &.clicked {
        transform: translateY(-40px); /* 更大的位移量 */
        z-index: 2;  // 确保选中卡片在上层
        cursor: default;
      }

    .red-pai{
        color: red;
    }

    .black-pai{
        color: black;
    }
    &:hover:not(.clicked) {
        transform: translateY(-10px);
        z-index: 2;
      }
}
</style>